<template>
  <div class="project-page">
    <!-- 顶部标题 -->
    <!-- <header class="header">
      <div class="logo">
        <span>广州殡葬服务中心</span>
      </div>
    </header> -->
    <Header />
    <!-- 页面内容 -->
    <div class="back-page">
      <div class="content">
        <!-- 标题 -->
        <div class="breadcrumb">
          <el-link type="primary" href="/index" icon="DArrowLeft">返回</el-link>
          <span>首页 / 我的控制台 / {{ title }}</span>
        </div>
        <h2>{{ title }}</h2>
        <div style="padding: 0 50px">
          <!-- 筛选条件 -->
          <div class="filters">
            <el-date-picker
              v-model="dateRange"
              style="max-width: 300px"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
            <el-select
              v-model="projectStatus"
              placeholder="请选择项目状态"
              style="max-width: 300px"
            >
              <el-option
                v-for="option in projectStatusOptions"
                :key="option.dictValue"
                :label="option.dictLabel"
                :value="option.dictValue"
              />
            </el-select>
            <el-input
              v-model="projectName"
              placeholder="请输入项目名称"
              style="max-width: 300px"
            />
            <el-button type="primary" @click="searchHandle">查询</el-button>
            <el-button @click="resetHandle">重置</el-button>
          </div>

          <!-- Tabs -->
          <!-- <el-tabs v-model="activeTab" class="tabs">
          <el-tab-pane label="全部" name="all" />
          <el-tab-pane label="征集中" name="collecting" />
          <el-tab-pane label="评审中" name="reviewing" />
          <el-tab-pane label="已结束" name="ended" />
          <el-tab-pane label="已中止" name="stopped" />
          <el-tab-pane label="已作废" name="invalid" />
        </el-tabs> -->

          <!-- 项目列表 -->
          <div class="project-list">
            <div
              v-for="(yearGroup, year) in groupedProjects"
              :key="year"
              class="year-group"
            >
              <h3>{{ year }}年</h3>
              <div class="project-cards">
                <div
                  v-for="project in yearGroup"
                  :key="project.id"
                  class="project-card"
                  @click="
                    navTo(
                      `/detail?projectId=${project.id}&id=${id}&type=${type}`
                    )
                  "
                >
                  <div class="card-header">
                    <el-tooltip :content="project.name" placement="top">
                      <div>{{ project.name }}</div>
                    </el-tooltip>
                  </div>
                  <p>项目编号：{{ project.oaCode }}</p>
                  <p>
                    项目类型：{{
                      getDictValue(projectTypeOptions, project.type)
                    }}
                  </p>
                  <p>发布时间：{{ project.publishTime || "暂无" }}</p>
                  <div class="card-footer">
                    <el-button
                      size="mini"
                      type="primary"
                      style="width: 100px"
                      :class="
                        project.type == 'project_relative_price'
                          ? 'bidding'
                          : ''
                      "
                      >{{
                        getDictValue(projectTypeOptions, project.type)
                      }}</el-button
                    >
                    <el-button size="mini" plain>{{
                      getDictValue(projectStatusOptions, project.status)
                    }}</el-button>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="projects.length === 0"
              style="text-align: center; margin: 100px 0; color: darkgrey"
            >
              暂无数据
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { myChooseProject, myWinProject } from "@/api/project";
import { useDataStore } from "@/store/index.js"; // 引入 Pinia Store
import { getDictValue } from "@/utils/common";
import Header from "../../components/Header.vue";

import moment from "moment";
const dataStore = useDataStore(); // 使用 Pinia Store
const projectStatusOptions = computed(() => dataStore.project_status);
const projectTypeOptions = computed(() => dataStore.project_type);

const route = useRoute();
const router = useRouter();
const type = computed(() => route.query.type);
const id = computed(() => route.query.id);
const title = computed(() =>
  type.value == "participate" ? "我参与的项目" : "我中选的项目"
);

const dateRange = ref([]);
const projectStatus = ref(null);
const projectName = ref("");
const activeTab = ref("all");

// const statusOptions = [
//   { value: "all", label: "全部" },
//   { value: "collecting", label: "征集中" },
//   { value: "reviewing", label: "评审中" },
//   { value: "ended", label: "已结束" },
//   { value: "stopped", label: "已中止" },
//   { value: "invalid", label: "已作废" },
// ];

const projects = ref([]);
const groupedProjects = ref({});

const resetHandle = () => {
  dateRange.value = [];
  projectStatus.value = "";
  projectName.value = "";
  searchHandle();
};
const searchHandle = async () => {
  const params = {
    supplierId: id.value,
    startTime: dateRange.value[0]
      ? moment(dateRange.value[0]).format("YYYY-MM-DD")
      : null,
    endTime: dateRange.value[1]
      ? moment(dateRange.value[1]).format("YYYY-MM-DD")
      : null,
    status: projectStatus.value,
    name: projectName.value,
  };
  try {
    let response;
    if (type.value == "participate") {
      response = await myChooseProject(params);
    } else {
      response = await myWinProject(params);
    }
    projects.value = response.data.map((project) => ({
      ...project,
      year: new Date(project.createTime).getFullYear(),
    }));
    groupedProjects.value = projects.value.reduce((acc, project) => {
      acc[project.year] = acc[project.year] || [];
      acc[project.year].push(project);
      return acc;
    }, {});
  } catch (error) {
    console.error("搜索失败：", error);
  }
};

const navTo = (path) => {
  router.push(path);
};

onMounted(async () => {
  await searchHandle();
});
</script>

<style lang="scss" scoped>
.card-header {
  background: url("../../assets/back3.png") no-repeat center center;
  background-size: cover;
  position: absolute;
  top: 0;
  width: 100%;
  height: 52px;
  left: 0;
  div {
    line-height: 52px;
    padding-left: 16px;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis;
    max-width: 100%;
  }
}
.header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #ddd;
}
.header .logo {
  display: flex;
  align-items: center;
}
.header .logo span {
  margin-left: 16px;
  font-size: 18px;
  font-weight: bold;
}
.content {
  padding: 16px;
  width: 80%;
  margin: 0 auto;
}
.breadcrumb {
  color: #888;
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  margin-left: -10px;
  span {
    margin-left: 20px;
  }
}
.filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.tabs {
  margin-bottom: 16px;
}
.project-list {
  margin-top: 16px;
}
.year-group {
  margin-bottom: 24px;
}
.year-group h3 {
  margin-bottom: 8px;
}
.project-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.project-card {
  width: 300px;
  background: #fff;
  padding: 60px 16px 16px 16px;
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.project-card h4 {
  margin-bottom: 8px;
  font-size: 16px;
}
.project-card p {
  margin: 4px 0;
  color: #666;
  font-size: 14px;
}
.card-footer {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
}
.back-page {
  height: calc(100vh - 56px);
  background: url("../../assets/f87147698f07020d4fea348f49da0166.png") no-repeat
    center center;
  background-size: cover;
}
.bidding {
  background-color: #ff8818;
  border-color: #ff8818;
}
:deep(.el-button.bidding:hover) {
  background-color: #ffac5e;
  border-color: #ffac5e;
}
</style>
